<template>
	<view class="app">
		<jnavbar title="分销达标"></jnavbar>
		<view class="page_container">
			<view class="banner"><vimage mode="widthFix" :src="activity.thumb"></vimage></view>
			<view class="u-m-t-40"><u-steps :list="stepList" :current="stepnum"></u-steps></view>
			<view>
				<view class="content-box u-p-20">
					<text class="title">奖励内容</text>
					<view class="u-flex u-m-b-20" v-for="(award, index) in awardlist" :key="index">
						<text class="el-sc-liwu icon"></text>
						<text class="u-m-l-10">{{ award.value }}</text>
					</view>
				</view>
				<view class="content-box u-p-20" v-if="info.condition">
					<text class="title">奖励条件</text>
					<view class="u-flex u-row-between" v-if="info.condition.order_money">
						<view class="u-flex">
							<text class="el-sc-wenzhang-copy icon"></text>
							<view class="u-m-l-10">
								<view class="">
									<text>分销订单总额达到</text>
									<text>{{ info.condition.order_money }}元</text>
								</view>
								<text class="u-tips-color u-font-24">当前已完成{{ info.condition.info.pay_ment }}元</text>
							</view>
						</view>
						<view :class="info.condition.info.order_money_success ? 'success' : 'fail'">
							<text>{{ info.condition.info.order_money_success ? '已完成' : '未完成' }}</text>
						</view>
					</view>
					<u-line margin="20rpx 0"></u-line>
					<view class="u-flex u-row-between" v-if="info.condition.order_count">
						<view class="u-flex">
							<text class="el-sc-wenzhang-copy icon"></text>
							<view class="u-m-l-10">
								<view class="">
									<text>分销订单总数达到</text>
									<text>{{ info.condition.order_count }}单</text>
								</view>
								<text class="u-tips-color u-font-24">当前已完成{{ info.condition.info.order_count }}单</text>
							</view>
						</view>

						<view :class="info.condition.info.order_count_success ? 'success' : 'fail'">
							<text>{{ info.condition.info.order_count_success ? '已完成' : '未完成' }}</text>
						</view>
					</view>
					<u-line margin="20rpx 0"></u-line>
					<view class="u-flex u-row-between" v-if="info.condition.child_count">
						<view class="u-flex">
							<text class="el-sc-wenzhang-copy icon"></text>
							<view class="u-m-l-10">
								<view class="">
									<text>下线总人数达到</text>
									<text>{{ info.condition.child_count }}人</text>
								</view>
								<text class="u-tips-color u-font-24">当前已完成{{ info.condition.info.user_count }}人</text>
							</view>
						</view>
						<view :class="info.condition.info.child_count_success ? 'success' : 'fail'">
							<text>{{ info.condition.info.child_count_success ? '已完成' : '未完成' }}</text>
						</view>
					</view>
					<u-line margin="20rpx 0"></u-line>
					<view class="u-flex u-row-between" v-if="info.condition.child_agent_count">
						<view class="u-flex">
							<text class="el-sc-wenzhang-copy icon"></text>
							<view class="u-m-l-10">
								<view class="">
									<text>下线分销商达到</text>
									<text>{{ info.condition.child_agent_count }}人</text>
								</view>
								<text class="u-tips-color u-font-24">当前已完成{{ info.condition.info.agent_count }}</text>
							</view>
						</view>
						<view :class="info.condition.info.child_agent_count_success ? 'success' : 'fail'">
							<text>{{ info.condition.info.child_agent_count_success ? '已完成' : '未完成' }}</text>
						</view>
					</view>
				</view>
				<view class="content-box u-p-20">
					<text class="title">活动信息</text>
					<view class="info">
						<text>活动时间</text>
						<text>{{ activity.start_time }}{{ activity.end_time }}</text>
					</view>
					<view class="info">
						<text>参与等级</text>
						<text>{{ activity.level_type == 1 ? activity.levelslist : '全部等级' }}</text>
					</view>
				</view>
				<view class="content-box u-p-20">
					<text class="title">活动规则</text>
					<u-parse :domain="baseUrl" :html="activity.content" :show-with-animation="true"></u-parse>
				</view>
			</view>
		</view>

		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			detail: {},
			activity: {},
			stepList: [],
			info: {},
			awardlist: [],
			stepnum: 0
		};
	},
	async onLoad(e) {
		await this.$getWx;
		this.id=e.id
		this.getdetail();
	},
	computed: {
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState({
			hastabbar: state => state.hastabbar
		})
	},
	methods: {
		getdetail() {
			this.$http('/agent/ActivityInfo/'+this.id, 'GET').then(res => {
				let activity = res.data.msg.activity;

				if (activity.level_type == 1) {
					let agentGrades = res.data.msg.agentGrades;
					activity.levels = JSON.parse(activity.levels);
					let levelslist = [];
					if (activity.levels.indexOf(0) > -1) {
						levelslist.push('默认等级');
					}
					activity.levels.forEach(l => {
						let i = agentGrades.findIndex(_ => _.id == l);

						if (i > -1) {
							levelslist.push(agentGrades[i].name);
						}
					});
					activity.levelslist = levelslist.join(';');
				}
				this.activity = activity;
				let step = res.data.msg.step;
				let steplist = [];
				for (let key in step) {
					let name = '';
					let sort = 0;
					console.log(key);
					switch (key) {
						case 'first':
							name = '第一阶段';
							sort = 0;
							break;
						case 'second':
							name = '第二阶段';
							sort = 1;
							break;
						case 'third':
							name = '第三阶段';
							sort = 2;
							break;
					}
					steplist.push({
						name: name,
						info: step[key],
						sort: sort
					});
				}
				steplist = steplist.sort((a, b) => {
					return a.sort - b.sort;
				});
				let stepnum = 0;
				steplist.forEach(a => {
					//判断当前阶段
					let stepinfo = a.info.condition.info;
					let is_success = true;
					for (let name in stepinfo) {
						if (name.indexOf('success') > -1) {
							//只要一个条件没有完成就失败
							if (stepinfo[name] == 0) {
								is_success = false;
							}
						}
					}
					if (is_success) {
						stepnum = a.sort;
					}
					//奖励内容
					a.awardlist = [];
					for (let key in a.info.role_info.award) {
						let value = '';
						switch (key) {
							case 'integral':
								value = '积分' + a.info.role_info.award[key];
								break;
							case 'balance':
								value = '余额￥' + a.info.role_info.award[key];
								break;
							case 'upgrade':
								value = '自动升级至下一个分销等级';
								break;
							case 'customize':
								value = a.info.role_info.award[key];
								break;
						}
						if (key == 'coupon') {
							a.info.role_info.coupons.forEach(c => {
								a.awardlist.push({name: key, value: c.name});
							});
						} else {
							a.awardlist.push({name: key, value: value});
						}
					}
				});
				this.stepnum = stepnum;
				console.log(stepnum);
				this.awardlist = steplist[stepnum].awardlist;
				this.info = steplist[stepnum].info;
				this.stepList = steplist;
			});
		},
		logincallback() {}
	}
};
</script>

<style lang="scss">
.banner {
	margin: 0 auto;
	width: 750rpx;
}
.content-box {
	width: 690rpx;
	background: #fff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		text-align: center;
		display: inline-block;
		margin-bottom: 30rpx;
	}
	.info {
		margin-bottom: 20rpx;
		text {
			display: block;
		}
		text:first-child {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}
	.icon {
		font-size: 48rpx;
	}
	.success {
		color: #19be6b;
	}
	.fail {
		color: #fa3534;
	}
}
</style>
